<script setup lang="ts">
import swiper from "../../assets/banner1.jpg"
import { reactive, ref } from 'vue';
import { onMounted } from "vue";
import { GetArticleList } from '../../utils/Home.ts'

// banner轮播图
const swiperarr: any = ref([swiper, swiper, swiper]);
const eleindex: any = ref(0);
const piclist: any = reactive([
    { text: '基金公司', img: '../../static/assets/images/home-pic/home-pic1.jpg' },
    { text: '播放/录制页面', img: '../../static/assets/images/home-pic/home-pic1.jpg' },
    { text: '播放/录制页面', img: '../../static/assets/images/home-pic/home-pic1.jpg' },
    { text: '播放/录制页面', img: '../../static/assets/images/home-pic/home-pic1.jpg' },
    { text: '播放/录制页面', img: '../../static/assets/images/home-pic/home-pic1.jpg' }
    ,
    { text: '播放/录制页面', img: '../../static/assets/images/home-pic/home-pic1.jpg' },
    { text: '播放/录制页面', img: '../../static/assets/images/home-pic/home-pic1.jpg' },
    { text: '播放/录制页面', img: '../../static/assets/images/home-pic/home-pic1.jpg' }
])
const nowdayswiper: any = reactive(
    [
        {
            title: "金融是实体经济的血液血脉通实体经济发展才能健康有力",
            content: "6月,走进兰州新区,处处都能感受实体经济发展的强劲信息和充沛动能:忙碌的工地上,大型机械运转不息,工程车辆穿梭往来;企业生产一线,机器开足马力"
        },
        {
            title: "金融是实体经济的血液血脉通实体经济发展才能健康有力",
            content: "6月,走进兰州新区,处处都能感受实体经济发展的强劲信息和充沛动能:忙碌的工地上,大型机械运转不息,工程车辆穿梭往来;企业生产一线,机器开足马力"
        },
        {
            title: "金融是实体经济的血液血脉通实体经济发展才能健康有力",
            content: "6月,走进兰州新区,处处都能感受实体经济发展的强劲信息和充沛动能:忙碌的工地上,大型机械运转不息,工程车辆穿梭往来;企业生产一线,机器开足马力金融是实体经济的血液血脉通实体经济发展才能健康有力月,走进兰州新区,处处都能感受实体经济发展的强劲信息和充沛动能:忙碌的工地上,大型机械运转不息,工程车辆穿梭往来;企业生产一线,机器开足马力"
        },
        {
            title: "金融是实体经济的血液血脉通实体经济发展才能健康有力",
            content: "6月,走进兰州新区,处处都能感受实体经济发展的强劲信息和充沛动能:忙碌的工地上,大型机械运转不息,工程车辆穿梭往来;企业生产一线,机器开足马力"
        }
    ])
// 推荐轮播图
const recommend: any = reactive([
    {
        pic: '',
        name: '新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局'
    },
    {
        pic: '',
        name: '新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局'
    },
    {
        pic: '',
        name: '新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局'
    },
    {
        pic: '',
        name: '新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局'
    },
    {
        pic: '',
        name: '新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局'
    },

])
const newslist: any = reactive([
    {
        title: "新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局啊啊啊啊啊",
        date: '2023.08.04',
        content: '紧紧围绕"补新区短板,服务实体经济"战略定位,努力打造融资支持,基金管理,融资担保,融资租赁,供应链金融,资产运营管理六大板块业务,不断向区域一流今日集团迈进。'
    },
    {
        title: "新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局啊啊啊啊啊",
        date: '2023.08.04',
        content: '紧紧围绕"补新区短板,服务实体经济"战略定位,努力打造融资支持,基金管理,融资担保,融资租赁,供应链金融,资产运营管理六大板块业务,不断向区域一流今日集团迈进。'
    },
    {
        title: "新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局啊啊啊啊啊",
        date: '2023.08.04',
        content: '紧紧围绕"补新区短板,服务实体经济"战略定位,努力打造融资支持,基金管理,融资担保,融资租赁,供应链金融,资产运营管理六大板块业务,不断向区域一流今日集团迈进。'
    },
    {
        title: "新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局啊啊啊啊啊",
        date: '2023.08.04',
        content: '紧紧围绕"补新区短板,服务实体经济"战略定位,努力打造融资支持,基金管理,融资担保,融资租赁,供应链金融,资产运营管理六大111板块业务,不断向区域一流今日集团迈进。'
    },
    {
        title: "新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局啊啊啊啊啊",
        date: '2023.08.04',
        content: '紧紧围绕"补新区短板,服务实体经济"战略定位,努力打造融资支持,基金管理,融资担保,融资租赁,供应链金融,资产运营管理六大板块业务,不断向区域一流今日集团迈进。'
    },
    {
        title: "新区金控供应链管理服务有限公司由集团立足兰州新区谋划发展布局啊啊啊啊啊",
        date: '2023.08.04',
        content: '紧紧围绕"补新区短板,服务实体经济"战略定位,努力打造融资支持,基金管理,融资担保,融资租赁,供应链金融,资产运营管理六大111板块业务,不断向区域一流今日集团迈进。'
    },
])
const zcolumn: any = reactive([

    {
        title: ' 深入新区金控集团调研金融高质量发展和防范化解金融风险',
        date: '2023.09.11'
    },
    {
        title: '   新区副书记、省长金湘军深入新区金控集团调研金融高质量发展和防ssssss',
        date: '2023.09.11'
    },
    {
        title: '  新区金控集团召开2023年第十九次党委理论学习中心组(扩大',
        date: '2023.09.11'
    },
    {
        title: ' 新区金控集团与中国邮政储蓄银行新区分行进行座谈交流',
        date: '2023.09.11'
    },
    {
        title: ' 深入新区金控集团调研金融高质量发展和防范化解金融风险',
        date: '2023.09.11'
    },
    {
        title: ' 深入新区金控集团调研金融高质量发展和防范化解金融风险',
        date: '2023.09.11'
    },
])
// const activeName = ref('1')

onMounted(() => {
    // console.log(newslist[0])
    console.log('123');

    GetArticleList().then((res: any) => {
        console.log(res);

    })

})
// 查看更多新闻
// const morenews = () => {

// }
// enter => (i:any){

// }
const enter = (i: any) => {
    //    console.log(i)
    eleindex.value = i
    console.log(eleindex);

    // if (this.eleindex === i) {
    //   this.eleindex = -1
    // } else {
    //   this.eleindex = i
    // }
}
const out = () => {

}

</script>

<template>
    <div>
        <!-- 轮播图 -->
        <div class="banner1">
            <el-carousel indicator-position="none" :interval="5000" arrow="always">
                <el-carousel-item v-for="item in swiperarr" :key="item">
                    <h3 text="2xl" justify="center">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 今日头条 -->
        <div class="nowday banner">
            <img src="../../assets/nowday.png" alt="">
            <el-carousel direction="vertical" :autoplay="true">
                <el-carousel-item v-for="item in nowdayswiper" :key="item">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.content }}</p>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 新闻 -->
        <div class="news banner">
            <div class="left">
                <el-carousel button="none" :interval="5000" height="415px" arrow="never">
                    <el-carousel-item v-for="item in recommend" :key="item">
                        <div class="title">
                            <h3 text="2xl" justify="center">{{ item.name }}</h3>
                        </div>
                        <img src="../../assets/news.jpg" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="right">
                <h3>新闻动态 NEWS</h3>
                <dl>
                    <dt v-for="item in newslist.slice(0, 1)" :key="item">
                        <h4><span>{{ item.title }} </span><span>{{ item.date }}</span></h4>
                        <p>{{ item.content }}</p>
                    </dt>
                    <dd v-for="item in newslist.slice(1, 4)" :key="item">
                        <h4>
                            <span class="date">{{ item.date }}</span>
                            <span>{{ item.title }} </span>
                            <button type="button" class="el-carousel__arrow ">
                                <svg style="width: 15px; margin-right: 0; " viewBox="0 0 1024 1024"
                                    xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
                                    <path fill="currentColor"
                                        d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z">
                                    </path>
                                </svg>
                                <!-- <el-icon>
                                    <ArrowRight />
                                </el-icon> -->
                                <!-- <i class="el-icon"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg></i> -->
                            </button>
                        </h4>
                    </dd>

                </dl>
                <CButton class="more" @click=""></CButton>
            </div>
        </div>
        <!-- 会议 -->
        <div class="meet banner">
            <el-carousel button="none" :interval="5000" height="162px" arrow="never">
                <el-carousel-item v-for=" item in 3" :key="item">
                    <img src="../../assets/meet.jpg" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 企业简介 -->
        <div class="overview banner">
            <div>
                <h3>
                    <span>集</span><span>团概况<br>Group business</span>
                </h3>
                <p class="text">
                    兰州新区金融投资控股集团有限公司成立于2017年4月，是经兰州新区党工委、管表余批准设立的集投资控股、产业培育、资本整合、股权运作等功能为一体的国有独资企业。集团拥有融资租赁、融资担保、私募基金管理牌照，主要承担新区金融类或类金影类股权投资与运营、资产运营管理、融资担保、风险投资、融资租赁、基金投资与管理、受托管理股权投资基金、金融资产交易及授权范围内的国有资产运营管理和股权投资管理、供应链管理、绿色认证.咨询等业务。
                </p>
                <CButton @click="" class="more"></CButton>
                <ul>
                    <li @click="">
                        <img src="../../assets/one.png" alt="">
                        <p>集团简介</p>
                    </li>
                    <li @click="">
                        <img src="../../assets/two.png" alt="">
                        <p>集团荣誉</p>
                    </li>
                    <li @click=""><img src="../../assets/three.png" alt="">
                        <p>组织架构</p>
                    </li>
                </ul>
            </div>
            <div>
                <img class="pic" src="../../assets/news.jpg" alt="">
            </div>
        </div>
        <!-- 专栏 -->
        <div class="column banner">
            <div>
                <div class="title">
                    <div class="line"></div>
                    <h3>党建专栏</h3>
                    <CButton></CButton>
                </div>
                <dl>
                    <dt>
                        <img src="../../assets/news.jpg" alt="">
                        <div class="content">
                            <h4>深新区金控集团调研金融高质量发展和防范化解金啊啊啊啊啊</h4>
                            <p>供应链管理及相关配套服务;仓储物流土地、房屋租赁;物业管理;电子商务;贸易经纪与代理;停车场服务及运营;建筑材料、水泥制品、供应链管理及相关配套服务;仓储物流土地、房屋租赁;物业管理;电子商务;贸易经纪与代理;停车场服务及运营;建筑材料、水泥制品、
                            </p>
                            <button>查看详情>></button>
                        </div>
                    </dt>
                    <dd v-for="item in zcolumn.slice(1, 5)" :key="item">
                        <span class="dian"></span>
                        <p>{{ item.title }}</p>
                        <span class="date">{{ item.date }}</span>
                    </dd>

                </dl>
            </div>
            <div>

                <div class="title">
                    <div class="line"></div>
                    <h3>文化建设</h3>
                    <CButton></CButton>
                </div>
                <dl>
                    <dt>
                        <img src="../../assets/news.jpg" alt="">
                        <div class="content">
                            <h4>深新区金控集团调研金融高质量发展和防范化解金啊啊啊啊啊</h4>
                            <p>供应链管理及相关配套服务;仓储物流土地、房屋租赁;物业管理;电子商务;贸易经纪与代理;停车场服务及运营;建筑材料、水泥制品、供应链管理及相关配套服务;仓储物流土地、房屋租赁;物业管理;电子商务;贸易经纪与代理;停车场服务及运营;建筑材料、水泥制品、
                            </p>
                            <button>查看详情>></button>
                        </div>
                    </dt>
                    <dd v-for="item in zcolumn.slice(1, 5)" :key="item">
                        <span class="dian"></span>
                        <p>{{ item.title }}</p>
                        <span class="date">{{ item.date }}</span>
                    </dd>

                </dl>
            </div>
        </div>
        <!-- 手风琴 -->
        <div class="accordion banner">
            <div class="or-container">
                <div class="box" :class="eleindex == i ? 'eleactive' : ''" v-for="(ele, i) in piclist" :key="i"
                    @mouseenter="enter(i)" @mouseleave="out()">
                    <!-- <img :src="ele.img"> -->
                    <img src="../../assets/news.jpg" alt="">
                    <p :class="eleindex == i ? 'px' : 'ps'">{{ ele.text }}</p>
                    <!-- <span>{{ i }}</span> -->
                </div>

            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.banner {
    width: 1400px;
    margin: 0 auto;
}

.banner1 {

    :deep(.el-carousel__container) {
        height: 665px
    }

    :deep(.el-carousel__arrow--left) {
        left: 126px;
    }

    :deep(.el-carousel__arrow--right) {
        right: 126px;
    }

    :deep(.el-carousel__arrow--left),
    :deep(.el-carousel__arrow--right) {
        width: 63px;
        height: 63px;

        background-color: #eae0ea;
        opacity: 0.55;
    }

    // .el-carousel_container {
    //     height: 665px !important;
    // }

    .el-carousel {
        width: 100%;
        height: 665px;
    }

    :deep(.el-icon) {
        font-size: 30px;
        color: #b4945b;
        // font-weight: 700;
        font-weight: bolder;


    }

    .el-carousel__arrow--left {}

    .el-carousel__item h3 {

        opacity: 0.75;
        line-height: 665px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background: url(../../assets/banner1.jpg) center center;
        height: 665px;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background: url(../../assets/banner1.jpg) center center;
        height: 665px;
    }

    .el-carousel--horizontal {
        height: 665px;

    }
}

.nowday {
    box-sizing: border-box;
    padding-left: 170px;
    position: relative;
    left: 0;
    height: 127px;
    // width: 1400px;
    margin: 40px auto;
    text-align: center;
    background: url(../../assets/kuang.png) center center;
    background-size: 1400px 127px;

    img {
        position: absolute;
        left: 20px;
        top: -10px;
    }

    :deep(.el-carousel__container) {
        height: 127px !important;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 33px;
        position: relative;
        left: -60px;
        color: #033c73;
        // opacity: 0.75;
        line-height: 80px;
        margin: 0;
        // text-align: center;
    }

    p {
        letter-spacing: 1px;

        color: #9a9a9a;
        font-size: 16px;
        width: 1115px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    // .el-carousel__button
    :deep(.el-carousel__button) {
        width: 11px;
        height: 11px;
        opacity: 1;
        border-radius: 50%;
        background-color: #033c73;
    }

    :deep(.is-active button) {
        background-color: #b99b64 !important;
    }

    :deep(.el-carousel__indicators--vertical) {
        right: 20px;
    }

    .el-carousel__item:nth-child(2n) {
        // background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        // background-color: #d3dce6;
    }

    // .el-carousel__button {
    //     background-color: #b4945b;
    // }
}

.news {
    height: 415px;
    display: flex;
    justify-content: space-between;

    .left {
        width: 640px;
        background-color: #475669;

        .el-carousel__item h3 {
            box-sizing: border-box;
            padding-left: 29px;
            color: #475669;
            font-size: 15px;
            color: #e7e6e6;
            // opacity: 0.75;
            font-weight: 400;
            line-height: 48px;
            margin: 0;
            // text-align: center;
        }

        img {
            height: 100%;
            width: 100%;
        }

        .title {
            position: absolute;
            bottom: 0;
        }

        :deep(.el-carousel__button) {
            width: 14px;
            height: 14px;
            opacity: 1;
            border-radius: 50%;
            background-color: #033c73;
        }

        .title {
            height: 45px;
            width: 100%;
            // background-color: #475669;
            background: rgba(0, 0, 0, 0.5);
        }

        :deep(.is-active button) {
            background-color: #ffffff !important;
        }


        .el-carousel__item:nth-child(2n) {
            // background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n + 1) {
            // background-color: #d3dce6;
        }

        :deep(.el-carousel__indicators) {
            margin-left: 500px;
        }

        :deep(.el-carousel__indicators--horizontal) {
            // right: 200px;
            left: 0;

            transform: none;


        }
    }

    .right {
        width: 700px;
        // background-color: #475669;
        // border: 1px solid red;

        h3 {
            font-size: 28px;
            height: 50px;

            text-align: center;
            color: #033c73;

        }

        .more {
            margin-top: 8px;
            margin-right: 50px;
        }


        dl dd {
            padding: 0px 20px;
            box-sizing: border-box;
            height: 70px;
            font-size: 15px;
            border-bottom: 1px solid #c6c6c6;
            // line-height: 70px;

            // line-height: 70px;
            h4 {
                cursor: pointer;
                position: relative;
                left: 0;
                display: flex;
                height: 70px;
                // justify-content: space-between;
                font-weight: 400;
                line-height: 70px;

            }

            h4 .date {
                margin-right: 20px;
                // display: inline-block;
                color: #033c73;
                font-weight: 700;

            }

            h4 :nth-child(2) {

                color: #000000;
                // display: inline-block;
                width: 517px;
                overflow: hidden;
                text-overflow: ellipsis;

                white-space: nowrap;

            }

            .el-carousel__arrow {

                right: 0px;
                border: 2px solid #cacaca;

                width: 25px !important;
                height: 25px;

                border-radius: 50%;

            }

            svg {
                color: #cacaca;
            }

            h4:hover {
                .el-carousel__arrow {

                    border: 2px solid #0076ab;
                }

                svg {
                    color: #0076ab;
                }

            }



        }

        dl dt {
            height: 110px;
            padding: 0px 20px;
            box-sizing: border-box;
            border-bottom: 1px solid #c6c6c6;
            cursor: pointer;

            h4 {
                display: flex;
                color: #033c73;
                font-size: 16px;
                font-weight: 600;
                justify-content: space-between;
            }

            h4 :nth-child(1) {
                padding: 5px;
                width: 500px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            p {
                color: #a9a9a9;
                text-indent: 2em;
                line-height: 26px;
                font-size: 16px;
            }
        }

    }

}

.meet {
    margin: 43px auto;
    height: 162px;


    .el-carousel__item h3 {
        box-sizing: border-box;
        padding-left: 29px;
        color: #475669;
        font-size: 15px;
        color: #e7e6e6;

        font-weight: 400;
        line-height: 48px;
        margin: 0;

    }

    img {
        height: 100%;
        width: 100%;
    }



    :deep(.el-carousel__button) {
        width: 14px;
        height: 14px;
        opacity: 1;
        border-radius: 50%;
        background-color: #bca882;
    }



    :deep(.is-active button) {
        background-color: #ffffff !important;
    }




    :deep(.el-carousel__indicators) {
        margin-left: 1310px;
    }

    :deep(.el-carousel__indicators--horizontal) {
        // right: 200px;
        left: 0;

        transform: none;


    }
}

.overview {
    height: 474px;

    display: flex;
    justify-content: space-between;

    h3 {
        color: #033c73;
        height: 88px;
    }

    h3 :first-child {
        font-size: 60px;

    }

    h3 :last-child {
        width: 150px;
        font-weight: 600;
        display: inline-block;

    }

    .text {
        padding: 0 5px 0 5px;
        text-indent: 2em;
        height: 41px;
        line-height: 41px;
        font-size: 15px;
        letter-spacing: 1px;
    }

    ul {
        margin-top: 235px;
        display: flex;
        justify-content: space-around;
        align-items: center;




        li {
            cursor: pointer;
            display: flex;
            align-items: center;
            flex-direction: column;

            // justify-content: space-between;
            img {
                // text-align: center;
            }

            // display: flex;
            p {
                margin-top: 11px;
                font-size: 20px;
                font-weight: 700;
                color: #033c73;
            }
        }


    }


    .more {
        top: 315px;
        right: 22px;
        position: absolute;

    }

    div {
        position: relative;
        width: 680px;
        // background-color: yellow;

        .pic {
            width: 100%;
            height: 100%;
        }
    }
}

.column {
    margin: 57px auto 45px auto;
    display: flex;
    height: 425px;
    justify-content: space-between;

    div {
        width: 680px;
        // background-color: springgreen;

        .title {

            display: flex;
            justify-content: space-between;
            height: 50px;
            position: relative;

            .line {
                position: absolute;
                width: 6px;
                background-color: #033c73;
                height: 29px;
                top: 4px;

            }

            h3 {
                padding-left: 10px;
                font-size: 26px;
                color: #033c73;
            }

        }

        dl :nth-child(2) {
            margin-top: 6px;
        }

        dl {

            dt {
                display: flex;
                justify-content: space-between;
                cursor: pointer;

                img {
                    width: 242px;
                    height: 173px;
                }

                .content {
                    // width: 404px;
                    height: 173px;


                    h4 {
                        height: 35px;
                        line-height: 35px;
                        margin: 0 auto;
                        width: 370px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;

                        font-size: 16px;
                    }

                    p {
                        color: #8f8f8f;
                        text-indent: 2em;
                        letter-spacing: 2px;

                        line-height: 28px;

                        padding-left: 30px;
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                    }

                    button {
                        cursor: pointer;
                        background-color: transparent;
                        border: 0px;
                        margin-top: 30px;
                        color: #033c73;
                        margin-left: 357px;
                        font-size: 14px;
                        // font-family: "Microsoft YaHei";

                    }


                }
            }

            dd:hover {
                color: #0076ab;

            }



            dd {
                cursor: pointer;
                position: relative;
                display: flex;
                justify-content: space-between;
                height: 50px;
                line-height: 45px;

                .dian {
                    position: absolute;
                    width: 5px;
                    height: 5px;
                    top: 57%;
                    transform: translateY(-50%);
                    display: inline-block;
                    border-radius: 50%;
                    background-color: black;
                }

                p {
                    padding-left: 15px;
                    width: 495px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 15px;
                    letter-spacing: 1px;
                }

                .date {
                    font-size: 15px;
                    padding-right: 10px;
                }

            }
        }
    }
}

.accordion {
    margin-bottom: 50px;
    height: 430px;
    background-color: #b0cae3;

    /*手风琴样式*/
    .or-container {
        display: flex;
        width: 100%;
        //   padding: 4% 2%;
        box-sizing: border-box;
        height: 100%;
    }

    .or-container:before {
        background-color: rgba(0, 0, 0, 0.4);
    }

    .box {
        flex: 1;
        overflow: hidden;
        //   position: relative;
        position: relative;
        left: 0;
        transition: 1s;
        //   box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
        line-height: 0;
        text-align: center;
    }

    .box>img {
        width: 100%;
        //   height: calc(100% - 10vh);
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        transition: 1s;
    }

    // .box>span {
    //     color: palegreen;
    //   font-size: 3.8vh;
    //   display: block;
    //   text-align: center;
    //   height: 10vh;
    //   line-height: 2.6;
    // }

    .ps {
        font-size: 19px;
        // text-align: center;
        color: rgb(255, 255, 255);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        line-height: 22px;
        // writing-mode: tb-rl;
        width: 20px;
        // height: 100px;
        display: inline-block;
        // left: 30px;
        padding: 8px 5px;


        // height: 122px;
        background-color: rgba(0, 0, 0, 0.4);
        // transform: translateY(-50%);
        transform: translate(-50%, -50%);
    }

    .px {
        position: absolute;
        background-color: rgba(96, 95, 95, 0.4);
        font-size: 24px;
        left: 50%;
        bottom: 0px;
        height: 63px;
        line-height: 63px;
        width: 100%;
        transform: translateX(-50%);
        color: white;
    }

    // .box:hover p{
    //     position: absolute;
    //     font-size: 19px;

    //      bottom: -100px;
    //        writing-mode: rl-tb; 

    //   color: palegreen;
    // }

    .eleactive {
        flex: 4.2 4.2 23%;
    }

    .eleactive>img {
        width: 100%;
        height: 100%;
    }
}
</style>
